<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>店铺编辑</title>
	<meta th:replace="admin/template/head.html"/>
</head>
<body>



<form class="layui-form" action="" id="form1">
	<div class="layui-form-item layui-hide">
		<br>
		<div class="layui-inline">
			<label class="layui-form-label">id</label>
			<div class="layui-input-inline">
				<input type="text" autocomplete="off" id="id" name="id" th:value="${shop?.id}" class="layui-input" placeholder="请输入名称">
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<br>
		<div class="layui-inline">
			<label class="layui-form-label">店铺名称</label>
			<div class="layui-input-inline">
				<input type="text" autocomplete="off" id="name" name="name" th:value="${shop?.name}" class="layui-input" placeholder="请输入店铺名称">
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">店铺地址</label>
			<div class="layui-input-inline">
				<input type="text" autocomplete="off" name="addr" id="addr" th:value="${shop?.addr}" class="layui-input" placeholder="请输入店铺地址">
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">门店封面</label>
			<div class="layui-input-inline">
				<div class="layui-upload-drag" id="upload">
					<i class="layui-icon"></i>
					<p>点击上传，或将文件拖拽到此处</p>
					<div id="uploadCover" th:class="${!#strings.isEmpty(shop?.cover)? '' : 'layui-hide'}">
						<hr>
						<img th:src="${#strings.isEmpty(shop?.cover)? '' : uriPrefix + shop.cover}" alt="上传成功后渲染" style="max-width: 100px">
					</div>
					<input type="hidden" id="cover" name="cover" th:value="${shop?.cover}">
				</div>
			</div>
		</div>
	</div>
</form>
<div class="layui-form-item">
	<div class="layui-input-block">
		<button type="submit" onclick="doSave()" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
		<button type="reset" class="layui-btn layui-btn-primary" onclick="resetForm()">重置</button>
	</div>
</div>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
	const uploadWin = ()=> {
		upload.render({
			elem: '#upload'
			,acceptMime: 'image/*'
			,size: 5120
			,field: 'files'
			,accept: 'images'
			,data: {type: 'shop'}
			,url: '/upload'
			,before: function(obj){
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#uploadCover').removeClass('layui-hide').find('img').attr('src', result)
				});
			}
			,done: function(res){
				if(res.code == 0) {
					$('#cover').val(res.data[0]);
				}
			}
		})
	}

	let $,layer,upload;
	layui.use(['form', 'layer', 'upload'], function() {
		$ = layui.jquery;
		layer = layui.layer;
		upload = layui.upload;
		uploadWin();
	});



	function doSave() {
		const data = {
			id: $('#id').val(),
			name: $('#name').val(),
			cover: $('#cover').val(),
			addr: $('#addr').val()
		}
		if(!data.name) {
			layer.msg('请输入店铺名称');
			return false;
		}
		$.post('/shop/edit', data, (res) => {
			if(res.code == 0) {
				parent.layer.alert(res.msg, {yes: function () {
					parent.layer.closeAll();
					parent.window.frames[0].location.reload();
				}});
			} else {
				layer.msg(res.msg);
			}

		})
	}
	const resetForm = ()=> {
		location.reload();
	}
</script>

</body>
</html>